import React from 'react';
import { StyleSheet, View, TextInput, TouchableOpacity, StatusBar, useColorScheme } from 'react-native';

// @ts-ignore
const SearchBar = ({ navigation }) => {
  const colorScheme = useColorScheme();
  const isDarkMode = colorScheme === 'dark';

  const themeStyles = {
    container: {
      backgroundColor: isDarkMode ? '#121212' : 'white',
    },
    searchBarContainer: {
      backgroundColor: isDarkMode ? '#333333' : '#f0f0f0',
    },
    input: {
      color: isDarkMode ? '#FFFFFF' : '#000000',
      placeholderTextColor: isDarkMode ? '#AAAAAA' : '#999',
    },
  };

  return (
    <View style={[styles.container, themeStyles.container]}>
      <TouchableOpacity
        style={[styles.searchBarContainer, themeStyles.searchBarContainer]}
        onPress={() => navigation?.navigate('SearchScreen')}
      >
        <TextInput
          style={[styles.input, themeStyles.input]}
          placeholder="点击搜索"
          editable={false}
        />
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    paddingTop: StatusBar.currentHeight, // 添加状态栏高度
  },
  searchBarContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    borderRadius: 20,
    paddingHorizontal: 15,
    margin: 10,
  },
  input: {
    flex: 1,
    height: 40,
    fontSize: 16,
  },
});

export default SearchBar;
